<template>
	<view class="goodslist-container">
		<u-navbar :title="navtitle"> </u-navbar>
		<u-notice-bar v-if="browse" :step="true" direction="column" :text="browsetext"></u-notice-bar>
		<u-notice-bar v-if="share" :step="true" direction="column" :text="sharetext"></u-notice-bar>

		<view class="searchContainer u-flex-y-center">
			<u-search placeholder="搜索商品" bgColor="#fff" :showAction="false" :focus="searchFocus"
				v-model="searchdata.productName" @search="getGoodsList" @blur="getGoodsList"></u-search>
		</view>
		<sortview ref="sortview" :rowtype="rowtype" :areaTree="areaTree" :dicts="dicts" @change="sortviewchange"
			@editrowtype="editrowtype" />

		<area-tree ref="areaTree" :areaTree="areaTree" @change="areachange"></area-tree>
		<getdatascrollview ref="getdatascrollview" :api="api" :seardata="searchdata" :customStyle="scrollviewstyle"
			:onPullingfalge="false">
			<template #default="{ list }">
				<!-- {{ list }} -->
				<view class="goodslist">
					<template v-for="(item, key) in list">
						<goodsitem v-if="rowtype == 'biserial'" :querydata="query" :dicts="dicts" :item="item"
							:levelTypeList="levelTypeList">
						</goodsitem>
						<goodsitem2 v-else :dicts="dicts" :querydata="query" :item="item" :levelTypeList="levelTypeList">
						</goodsitem2>
					</template>
				</view>
			</template>
		</getdatascrollview>
	</view>
</template>

<script>
	import {
		getReleaseAllPage
	} from "@/api/release.js";
	import {
		getDicts
	} from "@/api/dictdata";
	import {
		getProductClassAll
	} from "@/api/index.js";
	import {
		getAreaTree
	} from "@/api/user.js"
	import {stacking} from  '@/api/points.js'
	import areaTree from "@/pages/my/components/areaTree.vue"
	import sortview from "./components/sortview.vue"
	export default {
		components: {
			areaTree,
			sortview
		},
		data() {
			return {
				productId:"",
				query:{},
				rowtype: "biserial",
				filterPop: false,
				levelTypefullName: "分类",
				levelTypeShow: false,
				transactionalModeText: "交易模式",
				transactionalModeShow: false,
				list: [{
						name: "采购",
						id: '0',
					},
					{
						name: "供应",
						id: '1',
					},
				],
				api: getReleaseAllPage,
				navtitle: "商品列表",
				dicts: {},
				levelTypeList: [],
				searchdata: {
					level1Type: "",
					level2Type: "",
					level3Type: "",
					unitPriceSort: "",

					province: "",
					city: "",
					county: "",
					transactionalMode: "",
					manageModel: "",
					platformTrading: ""
				},
				// 5430 84 168
				scrollviewstyle: {
					height: `calc(100vh - 178rpx - ${uni.$u.addUnit(
					uni.$u.getPx(uni.$u.props.navbar.height) +
					uni.$u.sys().statusBarHeight,
					"px"
				)})`,
				},
				searchFocus: false,
				areaTree: [],
				areaIdstyle: {
					width: "auto",
					margin: "0"
				},
				browse: false,
				browsetext: [],
				browsetime: "",
				browsetimer: "",
				share:false,
				sharetext: [],
			};
		},
		onLoad(query) {
			console.log(query, "query");
			// console.log(query, this.$refs.sortview, "query");
			this.$refs.sortview.init(query)
			if (query.type == "search") {
				this.searchFocus = true;
			} else if (query.type == "browse") {
				this.browsefn()
				this.scrollviewstyle = {
					height: `calc(100vh - 178rpx - 80rpx - ${uni.$u.addUnit(
					uni.$u.getPx(uni.$u.props.navbar.height) +
					uni.$u.sys().statusBarHeight,
					"px"
				)})`,
				}
			} else if (query.type == "share") {
				this.scrollviewstyle = {
					height: `calc(100vh - 178rpx - 80rpx - ${uni.$u.addUnit(
					uni.$u.getPx(uni.$u.props.navbar.height) +
					uni.$u.sys().statusBarHeight,
					"px"
				)})`,
				}
				this.share = true;
				this.sharetext = ['选择商品后分享获得积分']
			}
			this.query=query
			// search
		},
		mounted() {
			this.init();
			console.log(this.$store.state);
		},
		onShow(){
			this.productId=""
		},
		computed: {
			areastr() {
				if (this.searchdata.province == '' || !this.searchdata.province) {
					return '请选择'
				}
				return `${this.searchdata.province} ${this.searchdata.city} ${this.searchdata.county}`

			},

		},
		// clearInterval(this.browsetimer)
		beforeDestroy(){
			clearInterval(this.browsetimer)
		},
		methods: {
			browsefn() {
				this.browse = true;
				this.browsetext = ['浏览20秒后获得积分']
				this.$store.commit('index/setBrowse',this.browse)
				this.$store.commit('index/setBrowseText',this.browsetext)
				this.browsetime = 20
				this.browsetimer = setInterval(() => {
					if (this.browsetime > 0) {
						this.browsetext = ['浏览' + this.browsetime + '秒后获得积分']
						this.$store.commit('index/setBrowseText',this.browsetext)
						this.browsetime--
					} else {
						let productId=this.$store.state.index.productId
						stacking({bizType:3,productId:productId||''})
						clearInterval(this.browsetimer)
						this.browse = false
						this.$store.commit('index/setBrowse',this.browse)
						this.$u.toast('浏览成功，获得积分')
					}

				}, 1000)
			},

			editrowtype(rowtype) {
				console.log(222);
				this.rowtype = rowtype;
			},
			async init() {
				let areaTree = await getAreaTree();
				this.areaTree = areaTree.data
				const res = await getProductClassAll();
				this.levelTypeList = res.data;
				let {
					data
				} = await getDicts("transactional_mode,manage_model,platform_trading,is_check_type");
				// 交易模式 transactional_mode
				// 经营模式 manage_model
				// 平台交易 platform_trading
				let transactional_mode = data.filter((e) => {
					return e.dictType == "transactional_mode";
				});
				let manage_model = data.filter((e) => {
					return e.dictType == "manage_model";
				});
				let platform_trading = data.filter((e) => {
					return e.dictType == "platform_trading";
				});
				let is_check_type = data.filter((e) => {
					return e.dictType == "is_check_type";
				});
				this.dicts = {
					transactional_mode,
					manage_model,
					platform_trading,
					is_check_type
				};
			},
			getGoodsList() {
				console.log(this.searchdata);
				this.$nextTick(() => {
					this.$refs.getdatascrollview.onRefresh();
				})

			},
			showlevelTypePopup() {
				this.levelTypeShow = true;
			},
			levelTypeTap({
				item1,
				item2,
				item3
			}) {

				this.searchdata.level1Type = item1.id;
				this.searchdata.level2Type = item2.id;
				this.searchdata.level3Type = item3.id;
				this.levelTypefullName = decodeURIComponent(item3.fullName);
				this.levelTypeShow = false;
				this.getGoodsList();
			},
			showtransactionalModePopup() {
				this.transactionalModeShow = !this.transactionalModeShow;
			},
			select(item) {
				console.log(item);
				this.searchdata.transactionalMode = item.id;
				this.transactionalModeText = item.name;

				this.transactionalModeShow = false;
				this.getGoodsList();
			},
			transactionalModeShowclose() {
				this.searchdata.transactionalMode = '';
				this.transactionalModeText = '交易模式';
				this.transactionalModeShow = false;
				this.getGoodsList();
			},
			close() {
				this.searchdata.level1Type = '';
				this.searchdata.level2Type = '';
				this.searchdata.level3Type = '';
				this.levelTypefullName = '分类';
				this.levelTypeShow = false;
				this.getGoodsList();
			},
			showAreaTree() {
				this.$refs.areaTree.showPickerFn();
			},
			filterclose() {
				this.filterPop = false
			},
			onFilterClear() {
				this.filterPop = false
				this.searchdata.province = '';
				this.searchdata.city = '';
				this.searchdata.county = '';
				this.getGoodsList();
			},
			onfilterSearch() {
				this.filterPop = false
				this.getGoodsList();
			},
			areachange(e) {
				this.searchdata.province = e.province;
				this.searchdata.city = e.city;
				this.searchdata.county = e.district;
				console.log(this.searchdata);
			},
			sortviewchange(searchdata) {
				this.searchdata = searchdata;
				this.getGoodsList();
			}

		},
	};
</script>

<style lang="scss" scoped>
	.goodslist-container {
		// height: 100vh;
		// display: flex;
		// flex-direction: column;
	}

	.goodslist {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 20rpx;
	}

	.searchContainer {
		padding: 20rpx;
	}
</style>